<template>
	<view style="height: 100%;box-sizing: border-box;" :style="{ backgroundColor: adBackground }">
		<!-- 淘宝活动页 -->
		<view class="tabbar-placing"></view>
		<image :src="aItem.imageUrl" style="width: 100%;" mode="widthFix"></image>
		<view class="to-top">
			<!-- #ifdef APP-PLUS -->
			<view class="flex justify-center margin-bottom padding-top">
				<view style="width: 450rpx;"><userButton @submitEvent="nvTaobao">进入购买 GO >></userButton></view>
			</view>
			<!-- #endif -->
			<view class="flex justify-center padding-lr padding-top">
				<textarea v-model="shareSummary" class="bg-white light radius" style="padding:10px;height: 100px;width: 100%;"></textarea>
			</view>
			<view class="flex justify-center">
				<view style="width: 450rpx;"><userButton @submitEvent="copyContent">复制淘口令</userButton></view>
			</view>
		</view>
		<!-- 分享 -->
		<view class="mask-content">
			<view class="share-header">分享图文到</view>
			<view class="share-list flex justify-center">
				<view v-for="(item, index) in shareList" :key="index" class="share-item" @tap="shareToFriend(item.name)">
					<image :src="item.icon" mode=""></image>
					<text>{{ item.text }}</text>
				</view>
			</view>
		</view>
		<dialog-box :modalName="modalName" @shareToTimeline="shareToTimeline" @cancelShare="cancelShare"></dialog-box>
	</view>
</template>

<script>
import userButton from '@/components/user-button.vue';
import clipboard from '@/common/clipboard.js';
var _self;
export default {
	components: {
		userButton
	},
	data() {
		return {
			shareList: [
				{
					name: 'weixin',
					icon: '/static/desc/share_wechat.png',
					text: '微信好友'
				},
				{
					name: 'timeline',
					icon: '/static/desc/share_moment.png',
					text: '朋友圈'
				}
			],
			aItem: [], //活动对象
			channelUrl: '', //渠道ID
			adBackground: '',
			shareSummary: '',
			modalName: ''
		};
	},
	onLoad(options) {
		_self = this;
		let id = options.id;
		_self.getAItem(id);
	},
	methods: {
		getAItem(id) {
			try {
				const param = {
					type: id
				};
				_self.$http.httpRequest('advertisement/list', param, false).then(res => {
					if (res._tranStatus) {
						_self.aItem = res._data.list[0];
						_self.adBackground = _self.aItem.imageColour;
						_self.getActivityLink(_self.aItem.url);
					}
				});
			} catch (e) {
				//console.log('rollTopList', e);
			}
		},
		getActivityLink(id) {
			try {
				const param = {
					activityId: id,
					text: '活动渠道链接'
				};
				_self.$http.httpRequest('taobao/construction/activityLink', param, true).then(res => {
					if (res._tranStatus) {
						_self.channelUrl = res._data.channelUrl;
						let taoKouLing = res._data.model;
						_self.shareSummary = `${_self.aItem.name}~復製此文案(${taoKouLing})，进入去【tao寶】立即抢购！`;
					}
				});
			} catch (e) {
				//console.log('rollTopList', e);
			}
		},

		/* 获取淘口令 */
		async loadData() {
			//console.log('_self.aItem.url', _self.aItem.url);
			let taoKouLing = await _self.$util.taoKouLingCreate(_self.aItem.url);
			_self.shareSummary = `${_self.aItem.name}~復製这条信息(${taoKouLing})，进入去【tao寶】立即抢购！`;
		},
		//跳转至淘宝
		nvTaobao() {
			//#ifdef APP-PLUS
			if (_self.channelUrl.length > 0) {
				let plug = uni.requireNativePlugin('UZK-Alibcsdk');
				plug.init(result => {
					plug.openurl({
						url: _self.channelUrl,
						linkkey: 'taobao',
						adzoneid: '103062550066',
						pid: 'mm_1159700186_1658850404_110381300098',
						nativeFailedMode: 'download',
						appkey: '29510703',
						opentype: 'native'
					});
				});
			}
			//#endif
		},
		copyContent() {
			uni.setClipboardData({
				data: _self.shareSummary
			});
		},
		//分享
		shareToFriend(name) {
			if (name == 'weixin') {
				_self.shareToWenXin();
			} else {
				//先保存图片
				let tmpUrl = _self.aItem.imageUrl;
				_self.saveImage(tmpUrl);
				clipboard.setText(_self.shareSummary);
				_self.modalName = 'timeline';
			}
		},

		//取消分享
		cancelShare() {
			_self.modalName = '';
		},

		//分享到朋友圈
		shareToTimeline() {
			_self.modalName = '';
			_self.$util.launchApp();
		},

		//分享到微信
		shareToWenXin() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				summary: _self.shareSummary,
				type: 1,
				success: e => {
					//console.log('success:' + JSON.stringify(e));
				},
				fail: e => {
					//console.log('fail:' + JSON.stringify(e));
				}
			});
		},

		//保存图片至本地相册
		saveImage(imgUrl) {
			uni.downloadFile({
				url: imgUrl,
				success: res => {
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}
.tabbar-placing {
	height: var(--status-bar-height);
	padding-top: 35px;
	padding-bottom: 10px;
	box-sizing: content-box;
}

.to-top {
	position: relative;
	top: -40rpx;
	z-index: 100;
	width: 100%;
	border-top-left-radius: 30rpx;
	border-top-right-radius: 30rpx;
}
.mask-content {
	position: fixed;
	bottom: 0rpx;
	left: 0rpx;
	z-index: 999;
	background-color: #ffffff;
	width: 100%;
	.share-header {
		height: 40rpx;
		font-size: $font-base + 2rpx;
		color: font-color-dark;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		padding-top: 10rpx;
		&:before,
		&:after {
			content: '';
			width: 240rpx;
			heighg: 0;
			border-top: 1px solid $border-color-base;
			transform: scaleY(0.5);
			margin-right: 30rpx;
		}
		&:after {
			margin-left: 30rpx;
			margin-right: 0;
		}
	}

	.share-item {
		min-width: 33.33%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 150rpx;
		image {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 8rpx;
		}
		text {
			font-size: $font-base;
			color: $font-color-base;
		}
	}
}
</style>
